<template>
	<view class="content">
		<view class="swiper">
			<u-swiper :list="list"></u-swiper>
		</view>
		<view class="box">
			<view class="title">
				愿您所求皆如愿！
			</view>
			<view class="item">
				<view class="label">
					*添油金额
				</view>
				<view class="input">
					<input type="text" placeholder="请输入添油金额" v-model="form.price" @input="inputNumber" />
				</view>
			</view>
			<view class="item">
				<view class="label">
					*寺庙选择
				</view>
				<view class="select" @click="goTemplelist">
					<view class="text">
						{{form.temple_id?templeName:'请点击选择寺庙'}}
					</view>
					<view class="icon">
						<u-icon name="play-right-fill" color="#6A2D0A" size="18"></u-icon>
					</view>
				</view>
				
			</view>
			<view class="item">
				<view class="label">
					*添油人姓名
				</view>
				<view class="input">
					<input type="text" placeholder="请输入添油人姓名" v-model="form.name" />
				</view>
			</view>
			<view class="item">
				<view class="label">
					联系电话
				</view>
				<view class="input">
					<input type="text" placeholder="请输入联系电话" maxlength="11" v-model="form.mobile" @input="inputPhone" />
				</view>
			</view>
			<view class="item1">
				<view class="label" style="line-height: 70rpx">
					性别
				</view>
				<view class="radio">
					<view class="gender" :class="{'gender-active': form.sex == '男'}" @click="radioSex(1)">
						男
					</view>
					<view class="gender" :class="{'gender-active': form.sex == '女'}" @click="radioSex(2)">
						女
					</view>
				</view>
			</view>
			<view class="item1" @click="show = true">
				<view class="label" style="line-height: 110rpx;">
					生辰
				</view>
				<view class="select">
					<view class="text">
						{{form.birthdate?form.birthdate:'请选择生辰'}}
					</view>
					<view class="icon">
						<u-icon name="play-right-fill" color="#6A2D0A" size="18"></u-icon>
					</view>
				</view>
			</view>
			<view class="item1" style="padding-bottom: 140rpx;">
				<view class="label">
					地址
				</view>
				<view class="input">
					<input type="text" placeholder="请输入地址" v-model="form.address" />
				</view>
			</view>
		</view>
		<view class="btn">
			<view class="submit" @click="submitOK">
				提交乐捐
			</view>
		</view>
		<u-datetime-picker :show="show" mode="date" @cancel="dateShow=false" @confirm="confirmDate"></u-datetime-picker>
	</view>
</template>

<script>
	import {pay} from '@/utils/index.js'
	export default {
		data() {
			return {
				list: [],
				form: {
					order_type: 2,
					price: '',
					name: '',
					mobile: '',
					sex: '',
					birthdate: '',
					address: '',
					temple_id: '',
					remark: ''
				},
				templeName: '',
				show: false,
				order_id: '',
			}
		},
		onLoad() {
			this.getBanner()
		},
		methods: {
			radioSex(e) {
				if(e == 1) this.form.sex = '男'
				if(e == 2) this.form.sex = '女'
			},
			getBanner() {
				this.$api.banner({
					type: 2
				}).then(res => {
					console.log(res);
					this.list = res.data.list.map(item => item.img_url)
				})
			},
			goTemplelist(){
				uni.navigateTo({
					url: '/subpackageA/sesameoil/templelist'
				})
			},
			inputNumber() {
				setTimeout(() => {
					this.form.price = this.form.price.replace(/[^\d.]/g,"");//清除"数字"和"."以外的字符
					this.form.price = this.form.price.replace(/^\./g,"");//验证第一个字符是数字而不是字符
					this.form.price = this.form.price.replace(/\.{2,}/g,".");//只保留第一个.清除多余的
					this.form.price = this.form.price.replace(".","$#$").replace(/\./g,"").replace("$#$",".");
					this.form.price = this.form.price.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');//只能输入两个小数
				}, 10)
			},
			inputPhone() {
				setTimeout(() => {
					this.form.mobile = this.form.mobile.replace(/[^\d]/g, "")
				}, 10)
			},
			selectTemple(val){
				this.form.temple_id = val.id
				this.templeName = val.name
			},
			confirmDate(e){
				const date = new Date(e.value)
				const year = date.getFullYear()
				const month = date.getMonth()+1
				const day = date.getDate()
				setTimeout(() => {
					this.form.birthdate = (year + '-' + month + '-' + day)
				}, 10)
				
				console.log(year + '-' + month + '-' + day);
				this.show = false
			},
			submitOK(){
				if(this.form.temple_id == '') {
					uni.showToast({
						title: '寺庙不可为空',
						icon: 'none'
					})
					return
				}
				if(this.form.name == '') {
					uni.showToast({
						title: '姓名不可为空',
						icon: 'none'
					})
					return
				}
				
				// if(this.order_id) {
				// 	pay(this.order_id,2,1)
				// 	return
				// }
				this.$api.blessingordercreate(this.form).then(res => {
					this.order_id = res.data.id
					uni.navigateTo({
						url: '/subpackageB/sesameoilorder/sesameoildetail?id='+ res.data.id
					})
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		min-height: 100vh;
		z-index: -1;
		background: #6A2D0A;
	}

	.box {
		padding: 0 30rpx;
		padding-top: 10rpx;

		.title {
			padding: 40rpx 0;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 30rpx;
			color: #FFFFFF;
			line-height: 42rpx;
			text-align: center;
			font-style: normal;
		}
	}

	.item {
		padding-bottom: 40rpx;

		.label {
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 30rpx;
			color: #FFFFFF;
			line-height: 42rpx;
			text-align: left;
			font-style: normal;
		}

		.select {
			margin-top: 20rpx;
			padding: 0 30rpx;
			height: 70rpx;
			background: #FFFFFF;
			border-radius: 42rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.text {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #AAAAAA;
				line-height: 70rpx;
				text-align: left;
				font-style: normal;
			}
		}

		.input {
			margin-top: 20rpx;
			height: 70rpx;
			background: #FFFFFF;
			border-radius: 42rpx;
			display: flex;
			align-items: center;
			padding: 0 30rpx;

			input {
				flex: 1;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #AAAAAA;
				line-height: 34rpx;
				text-align: left;
				font-style: normal;
			}
		}
	}

	.item1 {
		display: flex;
		padding-bottom: 20rpx;

		.label {
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 30rpx;
			color: #FFFFFF;
			line-height: 70rpx;
			text-align: left;
			font-style: normal;
			padding-right: 40rpx;
		}
		.input{
			flex: 1;
			height: 70rpx;
			background: #FFFFFF;
			border-radius: 42rpx;
			padding: 0 30rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #AAAAAA;
			line-height: 34rpx;
			text-align: left;
			font-style: normal;
			display: flex;
			align-items: center;
			input{
				flex: 1;
			}
		}
		.select {
			flex: 1;
			margin-top: 20rpx;
			padding: 0 30rpx;
			height: 70rpx;
			background: #FFFFFF;
			border-radius: 42rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			.text {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #AAAAAA;
				line-height: 70rpx;
				text-align: left;
				font-style: normal;
			}
		}
		.radio {
			display: flex;

			.gender {
				margin-right: 14rpx;
				width: 124rpx;
				height: 70rpx;
				background: #FEF1DC;
				border-radius: 42rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #6A2D0A;
				line-height: 70rpx;
				text-align: center;
				font-style: normal;
				border: 2rpx solid transparent;
			}

			.gender-active {
				background: linear-gradient(90deg, #D16325 0%, #F4A578 100%) !important;
				border-radius: 35rpx !important;
				border: 2rpx solid rgba(254, 241, 220, 0.5) !important;
				color: #FFFFFF !important;
			}
		}
	}

	.btn {
		position: fixed;
		width: 100%;
		height: 124rpx;
		bottom: 0;
		background: #FEF1DC;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 99;

		.submit {
			width: 690rpx;
			height: 84rpx;
			background: linear-gradient(270deg, #EA6F29 0%, #FAAA7D 100%);
			border-radius: 42rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #FFFFFF;
			line-height: 84rpx;
			text-align: center;
			font-style: normal;
		}
	}
</style>